<template>
    <!-- 查看详情 -->
    <el-dialog class="ba-operate-dialog" :model-value="baTable.form.operate === 'Info'" @close="baTable.toggleForm">
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">{{ t('Info') }}</div>
        </template>
        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
            <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'">
                <h4 style="margin-bottom: 10px;">订单信息</h4>
                <el-descriptions :column="2" border>
                    <el-descriptions-item label="用户ID">
                        {{ baTable.form.extend!.info.member.id }}
                    </el-descriptions-item>
                    <el-descriptions-item label="用户昵称">
                        {{ baTable.form.extend!.info.member.nickname }}
                    </el-descriptions-item>

                    <el-descriptions-item label="订单编号">
                        {{ baTable.form.extend!.info.out_trade_no }}
                    </el-descriptions-item>
                    <el-descriptions-item  :span="2" label="状态" >
                        <span style="color: #c45656;font-weight: bold">
                            {{ baTable.form.extend!.info.status_text }}
                        </span>
                    </el-descriptions-item>
                    <el-descriptions-item   label="创建时间">
                        {{ timeFormat(baTable.form.extend!.info.create_time) }}
                    </el-descriptions-item>
                    <el-descriptions-item   label="支付时间">
                        {{ timeFormat(baTable.form.extend!.info.pay_time) }}
                    </el-descriptions-item>
                </el-descriptions>
            </div>

            <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'" style="margin-bottom: 20px">
                <h4 style="margin-bottom: 10px;">会员卡信息</h4>
                <el-descriptions :column="2" border>

                    <el-descriptions-item label="会员卡类型">
                         <span>
                             <el-tag type="danger" v-if="baTable.form.extend!.info.vipCard.type == 1">景区</el-tag>
                             <el-tag type="danger" v-if="baTable.form.extend!.info.vipCard.type == 2">民宿</el-tag>
                         </span>
                    </el-descriptions-item>

                    <el-descriptions-item label="会员卡名称">
                         <span style="color: #c45656;font-weight: bold">
                           {{ baTable.form.extend!.info.vipCard.name }}
                         </span>
                    </el-descriptions-item>
                    <el-descriptions-item label="时效时长">
                         <span style="color: #c45656;font-weight: bold">
                           <el-tag type="danger" v-if="baTable.form.extend!.info.vipCard.expire_type == 1">天</el-tag>
                           <el-tag type="danger" v-if="baTable.form.extend!.info.vipCard.expire_type == 2">半年</el-tag>
                           <el-tag type="danger" v-if="baTable.form.extend!.info.vipCard.expire_type == 3">一年</el-tag>
                         </span>
                    </el-descriptions-item>

                    <el-descriptions-item label="支付金额">
                         <span style="color: #c45656;font-weight: bold">
                           {{ baTable.form.extend!.info.price}}
                         </span>
                    </el-descriptions-item>
                </el-descriptions>
            </div>


            <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'">
                <h4 style="margin-bottom: 10px;">用户信息</h4>

                <el-descriptions :column="2" border>
                    <el-descriptions-item label="姓名">
                        {{ baTable.form.extend!.info.user_name }}
                    </el-descriptions-item>
                    <el-descriptions-item label="电话">
                        {{ baTable.form.extend!.info.user_phone }}
                    </el-descriptions-item>
                    <el-descriptions-item label="收货地址">
                        {{ baTable.form.extend!.info.address }}{{ baTable.form.extend!.info.address_detail }}
                    </el-descriptions-item>
                </el-descriptions>
            </div>


            <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'" v-if="baTable.form.extend!.info.status == 2 || baTable.form.extend!.info.status == 3">
                <h4 style="margin-bottom: 10px;">快递信息</h4>
                <el-descriptions :column="2" border>
                    <el-descriptions-item label="快递名称">
                        {{ baTable.form.extend!.info.express_name }}
                    </el-descriptions-item>
                    <el-descriptions-item label="快递单号">
                        {{ baTable.form.extend!.info.express_nums }}
                    </el-descriptions-item>
                    <el-descriptions-item label="发货时间">
                        {{ baTable.form.extend!.info.send_time }}
                    </el-descriptions-item>
                    <el-descriptions-item label="收货时间">
                        {{ baTable.form.extend!.info.take_time }}
                    </el-descriptions-item>
                    <el-descriptions-item label="备注">
                        {{ baTable.form.extend!.info.notes }}
                    </el-descriptions-item>
                </el-descriptions>
            </div>

        </el-scrollbar>
    </el-dialog>
</template>

<script setup lang="ts">
import { inject } from 'vue'
import { useI18n } from 'vue-i18n'
import type BaTable from '/@/utils/baTable'
import { timeFormat } from '/@/utils/common'

const baTable = inject('baTable') as BaTable

const { t } = useI18n()
</script>

<style scoped lang="scss">
.table-el-tree {
    :deep(.el-tree-node) {
        white-space: unset;
    }
    :deep(.el-tree-node__content) {
        display: block;
        align-items: unset;
        height: unset;
    }
}
</style>
